<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Array</title>
</head>

<body>
    <p>Array 是内置的构造函数，用于创建数组。 </p>
    <p>数组赋值后，无论修改哪个变量另一个对象的数据值也会相当发生改变。</p>
    <p>这通常是因为你实际上是在操作同一个数组对象的引用，而不是创建了新的独立数组。</p>
    <p>
        JavaScript中的数组（和对象）是通过引用来传递的。当你将一个数组赋值给另一个变量时，你实际上是在创建一个指向相同内存地址的新引用，而不是创建数组的一个副本。因此，如果你修改了这个数组（无论通过哪个引用），所有指向这个数组的引用都会“看到”这些更改。
    </p>
    <p>
        总结：<br>

        1. 推荐使用字面量方式声明数组，而不是 Array 构造函数<br>
        2. 实例方法 forEach 用于遍历数组，替代 for 循环 (重点)<br>
        3. 实例方法 filter 过滤数组单元值，生成新数组(重点)<br>
        4. 实例方法 map 迭代原数组，生成新数组(重点)<br>
        5. 实例方法 join 数组元素拼接为字符串，返回字符串(重点)<br>
        6. 实例方法 find 查找元素， 返回符合测试条件的第一个数组元素值，如果没有符合条件的则返回 undefined(重点)<br>
        7. 实例方法every 检测数组所有元素是否都符合指定条件，如果所有元素都通过检测返回 true，否则返回 false(重点)<br>
        8. 实例方法some 检测数组中的元素是否满足指定条件 如果数组中有元素满足条件返回 true，否则返回 false<br>
        9. 实例方法 concat 合并两个数组，返回生成新数组<br>
        10. 实例方法 sort 对原数组单元值排序<br>
        11. 实例方法 splice 删除或替换原数组单元<br>
        12. 实例方法 reverse 反转数组<br>
        13. 实例方法 findIndex 查找元素的索引值

    </p>
    <script>
        // 构造函数创建数组
        let arr = new Array(5, 6, 8)

        // 字面量方式创建数组
        let list = ['html', 'css', 'javascript']


        // let array1 = [1, 2, 3];
        // let array2 = array1; // array2 现在是对 array1 的引用  
        // array2[0] = 4; // 修改 array2 的第一个元素  
        // console.log(array1); // 输出: [4, 2, 3]，因为 array1 和 array2 指向同一个数组  
        // console.log(array2); // 输出: [4, 2, 3]

        // 如何避免这种情况
        // 如果你想要避免这种“链式反应”，即修改一个数组时不影响另一个看似独立的数组，
        // 你可以通过创建一个数组的副本来实现。有几种方法可以创建数组的副本：

        // 1、使用扩展运算符（Spread Operator）
        // let array1 = [1, 2, 3];
        // let array2 = [...array1]; // 使用扩展运算符创建副本  
        // array2[0] = 4;
        // console.log(array1); // 输出: [1, 2, 3]  
        // console.log(array2); // 输出: [4, 2, 3]

        //    2、 使用 Array.slice() 方法
        // let array1 = [1, 2, 3];
        // let array2 = array1.slice(); // 不带参数调用 slice() 方法将返回数组的浅拷贝  
        // array2[0] = 4;
        // console.log(array1); // 输出: [1, 2, 3]  
        // console.log(array2); // 输出: [4, 2, 3]

        // 3、使用 Array.from() 方法
        // let array1 = [1, 2, 3];
        // let array2 = Array.from(array1); // 创建数组的浅拷贝  
        // array2[0] = 4;
        // console.log(array1); // 输出: [1, 2, 3]  
        // console.log(array2); // 输出: [4, 2, 3]

        // 注意，上述方法都是创建数组的浅拷贝。如果你的数组中包含对象或数组等复杂数据类型，
        // 并且你想要对这些复杂数据类型也进行深拷贝，那么你可能需要实现更复杂的拷贝逻辑或
        // 使用专门的库（如Lodash的_.cloneDeep()方法）来实现深拷贝


        // 定义两个数组
        const array1 = [1, 2, 3];
        const array2 = [4, 5, 6];
        // 使用 concat 合并数组
        const newArray = array1.concat(array2);
        // 输出结果
        console.log('array1:', array1); // 原数组不变
        console.log('array2:', array2); // 原数组不变
        console.log('newArray:', newArray); // 合并后的新数组


        const fruits = ['banana', 'apple', 'cherry', 'date'];
        // 默认排序
        fruits.sort();
        console.log('Sorted fruits:', fruits); // Sorted fruits: ['apple', 'banana', 'cherry', 'date']


        const numbers = [40, 100, 1, 5, 25, 10];
        // 数字排序，从小到大
        numbers.sort(function (a, b) {
            return a - b;
        });
        console.log('Sorted numbers (ascending):', numbers); // Sorted numbers (ascending): [ 1, 5, 10, 25, 40, 100 ]
        // 数字排序，从大到小
        numbers.sort(function (a, b) {
            return b - a;
        });
        console.log('Sorted numbers (descending):', numbers); // Sorted numbers (descending): [ 100, 40, 25, 10, 5, 1 ]

        const array = ['a', 'b', 'c', 'd', 'e'];
        // 反转数组
        array.reverse();
        console.log('Reversed array:', array); // Reversed array: [ 'e', 'd', 'c', 'b', 'a' ]


        const array3 = [3, 1, 4];
        const array4 = [6, 2, 5];
        // 合并数组
        const combinedArray = array3.concat(array4);
        // 对合并后的数组进行排序
        combinedArray.sort(function (a, b) {
            return a - b;
        });
        // 反转排序后的数组
        combinedArray.reverse();
        console.log('Final array:', combinedArray); // [6, 5, 4, 3, 2, 1]


       



    </script>
</body>

</html>